<template>
  <div class="footer-dialog">
    <div class="footer-in">
      <div class="flex-1">
        <div class="f-header">
          <span></span>
          <div class="close">
            <i class="el-icon-circle-close" @click="close"></i>
          </div>
        </div>
        <div class="f-content">
          <video
            ref="vlogs"
            loop
            controls
            :src="
              lang === 'zh'
                ? 'https://bepai-sotenowe.oss.bepai.net/static/video/zh/gssl_zh.mp4'
                : 'https://bepai-sotenowe.oss.bepai.net/static/video/en/gssl_en.mp4'
            "
          ></video>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  props: {
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      gender: true,
    }
  },
  computed: {
    ...mapState(['lang']),
  },
  mounted() {
    const vlogs = this.$refs.vlogs
    vlogs && vlogs.play()
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    },
  },
}
</script>

<style lang="less" scoped>
@import '~assets/var';

.footer-dialog {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;

  .footer-in {
    .pd(20, 24, 20, 24);
    .ft(16);

    width: 80vw;
    height: 90vh;
    margin: 5vh auto;
    border-radius: 4px;
    display: flex;
    flex-direction: column;

    .flex-1 {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }

    .f-header {
      .ft(26);
      .mg(0, 0, 0, 0);

      display: flex;
      justify-content: space-between;
      font-weight: bold;
    }

    .f-content {
      flex: 1;
      // overflow: auto;
      .mg(10, 0, 0, 0);
      .pd(10, 0, 20, 0);

      video {
        width: 100%;
        // height: 100%;
      }
    }

    h1 {
      .ft(18);
      .mg(20, 0, 6, 0);
    }
  }

  .close {
    .width(30);
    .height(30);
    .ft(30);
    .mg(0, 0, 0, 0);

    color: rgba(255, 255, 255, 1);
    cursor: pointer;
  }
}
</style>
